<template>
    <div>
        <el-tree ref="tree"
                 :data="factoryOptions"
                 :props="defaultProps"
                 :default-expand-all="dea"
                 :highlight-current="true"
                 node-key="value"
                 :expand-on-click-node="eocn"
                 show-checkbox
                 :filter-node-method="filterNode"
                 @check-change="handleNodeChange"
                 @node-click="handleNodeClick"
        >
            <span slot-scope="{node}" class="span-ellipsis">
                <span :title="node.label">{{ node.label }}</span>
            </span>
        </el-tree>
    </div>
</template>

<script>
export default {
    name: 'TreePanel',
    props: {
        dataList: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            filterText: '',
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            dea: true,
            eocn: false,
            changeTreeList: []
        }
    },
    computed: {
        factoryOptions() {
            return this.dataList || []
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        handleNodeClick() {
            // this.$emit('changeNode', {data: data, node: node})
        },
        handleNodeChange(data) {
            if (!data.children) {
                this.changeTreeList.push(data)
                // this.$emit('changeNode', this.changeTreeList)
            }
            this.$emit('changeNode', this.changeTreeList)
        }
    }
}
</script>

<style scoped lang="scss">
.span-ellipsis {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;

    /* display: block; */
}
</style>
